#{extends 'main.html' /} #{set title:'Shopping' /} #{if flash?.error}
<div class="error">
	<p style="color: #c00">${flash.error}</p>
</div>
#{/if} #{if flash?.success}
<div class="success">
	<p style="color: #5fa022">${flash.success}</p>
</div>
#{/if}
<div class="row-fluid">
	<div class="span7 offset9">
		#{form @Shop.search()} <input id="dish" class="search-block-level"
			placeholder="    Search for dishes here" name="dish">
		#{/form}
	</div>
	<div class="span8 offset1">
		#{list items:restaurants, as:'restaurant'}
		<h3>${restaurant.name}</h3>
		<hr />
		<table>
			<tr>
				<td class="span2"><h4>Dish</h4></td>
				<td class="span1"></td>
				<td class="span1"><h4>Price</h4></td>
				<td class="span1"><h4>Add to cart</h4></td>
			</tr>
			#{list items:restaurant.dishes, as:'dish'}
			<tr height="50px">
				<td>${dish.name}</td>
				<td><a href="${dish.path}"> <img width="40px" height="40px"
						src="${dish.path}">
				</a></td>
				<td>€${String.format("%.2f", dish.price)}</td>
				<td><input class="btn btn-small btn-primary add" type="button"
					value="Add" id="${dish.id}"></td>
			</tr>
			#{/list}
		</table>
		#{/list} <br>
		<hr />
		<div id="resturant" class="pull-left">
			<a href='/application/home'><input
				class="btn btn-small btn-primary" type="button"
				value="Change location"></a> <a href='/shop/cart'><input
				class="btn btn-small btn-primary" type="button" value="Go to cart"></a>
		</div>
		<br>
		<hr />
	</div>

	<div id="message" style="display: none">
		Item has been added to cart</div>
			<script type="text/javascript">
		$(document).ready(function(){
		$(".add").click(function(){
			var dish_id = this.id;
			var url = #{jsAction @shop.addToShoppingCart(':input') /}
	        $.get(url({input: dish_id}), function() {
	        	
        	});        	
        	$('#message').show(50).delay(500);  
        	$('#message').hide(50);
        	
		});
	});
</script>
		